<template>
  <div class="edit-box">
    <!-- 标签类型列表 -->
    <div class="options">
      <div class="option">
        <el-space>
          <el-icon>
            <PriceTag />
          </el-icon>
          <span>标签类型</span>
          <span :style="{ color: '#18c174 ' }">(可拖拽添加多个)</span>
        </el-space>
      </div>
      <el-scrollbar max-height="150px">
        <el-row class="tag-row">
          <el-col
            draggable="true"
            v-for="tag in tagList"
            :key="tag.name"
            :span="4"
            @dragstart="(e) => onDragstart(e, tag)"
            @drag.prevent
          >
            <div class="tag-box">
              <div class="icon">
                <el-icon size="16px">
                  <component :is="tag.name"></component>
                </el-icon>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>
    <!-- 标签列表 -->
    <div class="options">
      <div class="option">
        <el-space>
          <el-icon>
            <Tickets />
          </el-icon>
          <span>标签列表</span>
        </el-space>
      </div>
    </div>
    <div class="options">
      <el-scrollbar max-height="170px" v-if="config.dragTagList.length">
        <div
          class="option"
          :class="activeTag.uuid == tag.uuid ? 'option-active' : ''"
          @click="onChooseTag(tag)"
          v-for="tag in config.dragTagList"
          :key="tag.uuid"
        >
          <div class="icon-name">
            {{ tag.innerText }}
          </div>
          <el-space>
            <div class="check" v-show="activeTag.uuid == tag.uuid">
              <el-icon size="18px" color="#2a3ff6">
                <Check />
              </el-icon>
            </div>
            <div class="icon-delete">
              <el-icon size="18px" color="#2a3ff6">
                <Delete @click.stop="onDeleteTag(tag.uuid)" />
              </el-icon>
            </div>
          </el-space>
        </div>
      </el-scrollbar>
      <el-empty v-else description="暂无标签" :image-size="100" />
    </div>
    <!-- 标签编辑 -->
    <div class="options">
      <div class="option">
        <el-space>
          <el-icon>
            <EditPen />
          </el-icon>
          <span>标签编辑</span>
        </el-space>
      </div>
    </div>
    <div class="options" v-if="activeTag.uuid">
      <div class="option">
        <div class="grid-txt">
          <el-button size="small" type="primary" link>容器高度</el-button>
        </div>
        <div class="grid-silder">
          <el-slider
            size="small"
            @input="onChangeTagValue"
            v-model="activeTag.height"
            :min="1"
            :max="500"
            :step="1"
          />
        </div>
      </div>
      <div class="option">
        <div class="grid-txt">
          <el-button size="small" type="primary" link>容器宽度</el-button>
        </div>
        <div class="grid-silder">
          <el-slider
            size="small"
            @input="onChangeTagValue"
            v-model="activeTag.width"
            :min="1"
            :max="500"
            :step="1"
          />
        </div>
      </div>
      <div class="option">
        <div class="grid-txt">
          <el-button size="small" type="primary" link>字体大小</el-button>
        </div>
        <div class="grid-silder">
          <el-slider
            size="small"
            @input="onChangeTagValue"
            v-model="activeTag.fontSize"
            :min="1"
            :max="50"
            :step="0.1"
          />
        </div>
      </div>
      <div class="option">
        <div class="grid-txt">
          <el-button size="small" type="primary" link>标签坐标X</el-button>
        </div>
        <div class="grid-silder">
          <el-slider
            size="small"
            @input="onChangeTagValue"
            v-model="activeTag.positionX"
            :min="-300"
            :max="300"
            :step="0.01"
          />
        </div>
      </div>
      <div class="option">
        <div class="grid-txt">
          <el-button size="small" type="primary" link>标签坐标Y</el-button>
        </div>
        <div class="grid-silder">
          <el-slider
            size="small"
            @input="onChangeTagValue"
            v-model="activeTag.positionY"
            :min="-300"
            :max="300"
            :step="0.1"
          />
        </div>
      </div>
      <div class="option">
        <div class="grid-txt">
          <el-button size="small" type="primary" link>标签坐标Z</el-button>
        </div>
        <div class="grid-silder">
          <el-slider
            size="small"
            @input="onChangeTagValue"
            v-model="activeTag.positionZ"
            :min="-200"
            :max="200"
            :step="0.1"
          />
        </div>
      </div>
      <div class="option">
        <div class="grid-txt">
          <el-button size="small" type="primary" link>背景颜色</el-button>
        </div>
        <div class="grid-silder">
          <el-color-picker
            size="small"
            color-format="hex"
            :predefine="predefineColors"
            @change="onChangeTagValue"
            v-model="activeTag.backgroundColor"
          />
        </div>
        <div class="grid-txt">
          <el-button size="small" type="primary" link>图标颜色</el-button>
        </div>
        <div class="grid-silder">
          <el-color-picker
            size="small"
            color-format="hex"
            :predefine="predefineColors"
            @change="onChangeTagValue"
            v-model="activeTag.iconColor"
          />
        </div>
        <div class="grid-txt">
          <el-button size="small" type="primary" link>字体颜色</el-button>
        </div>
        <div class="grid-silder">
          <el-color-picker
            size="small"
            color-format="hex"
            :predefine="predefineColors"
            @change="onChangeTagValue"
            v-model="activeTag.color"
          />
        </div>
      </div>
      <div class="option" :style="{ height: 'auto' }">
        <div class="grid-txt">
          <el-button type="primary" link>标签内容</el-button>
        </div>
        <div class="grid-silder">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 3 }"
            @input="onChangeTagValue"
            v-model.trim="activeTag.innerText"
          ></el-input>
        </div>
      </div>
    </div>
    <div class="options">
      <div class="option">
        <el-button
          size="small"
          type="primary"
          icon="Refresh"
          @click="onInitialize"
          :style="{ width: '96%', borderRadius: 0 }"
        >
          重置
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed, defineExpose, getCurrentInstance } from "vue";
import { useMeshEditStore, useLabelListStore } from "@/stores/modules/model.js";
import { PREDEFINE_COLORS } from "@/config/constant";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
const { $bus } = getCurrentInstance().proxy;
const meshStore = useMeshEditStore();
const labelStore = useLabelListStore();

const predefineColors = PREDEFINE_COLORS;
const config = reactive({
  dragTagList: computed(() => {
    return labelStore.labelList;
  }),
});

const tagList = computed(() => {
  const arr = [];
  for (const [key] of Object.entries(ElementPlusIconsVue)) {
    arr.push({ name: key });
  }
  return arr;
});

const activeTag = reactive({});

// 拖拽标签开始
const onDragstart = (e, tag) => {
  const label = {
    tagName: tag.name,
  };
  meshStore.setModelApi(label);
  meshStore.changeDragType("tags");
};

// 重置数据
const onInitialize = () => {
  activeTag.uuid = null;
  meshStore.labelIns.clearSceneLabelss();
  labelStore.setLabelList(meshStore.labelIns.labelList);
};

//选择标签
const onChooseTag = (tag) => {
  Object.assign(activeTag, { ...tag });
};

// 删除标签
const onDeleteTag = (uuid) => {
  meshStore.labelIns.deleteLabel(uuid);
  labelStore.setLabelList(meshStore.labelIns.labelList);
  activeTag.uuid = null;
};

// 修改标签配置
const onChangeTagValue = () => {
  meshStore.labelIns.updateLabelElement(activeTag);
};

defineExpose({ config });
</script>

<style scoped lang="scss">
.tag-row {
  color: #fff;
  font-size: 12px;
  cursor: all-scroll;
  .tag-box {
    margin: 10px;
    box-sizing: border-box;
    border: 1px solid #fff;
    padding: 5px;
    text-align: center;
  }
}
.icon-name {
  width: 240px;
  max-width: 240px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.options {
  max-width: 380px;
  box-sizing: border-box;
  background-color: #1b1c23;
  .option-active {
    background-color: #27282f;
  }
  .space-between {
    justify-content: space-between;
  }
  .option {
    padding: 0px 18px;
    box-sizing: border-box;
    cursor: pointer;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 33px;
    font-size: 14px;
    .icon-name {
      display: flex;
      align-items: center;
    }
  }
}
.grid-txt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.grid-silder {
  flex: 5;
  padding-left: 10px;
}
.grid-style {
  min-width: 110px;
}
</style>